<template>
  <div class="bg">
    <nav-com
      :title="title"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <div class="top-view1-box">
        <div
          style="padding:5vw 0 0 3vw;font-weight:700"
          class="texts-top"
        >
          <div>我的{{openType|yueNameFilter}}<span style="font-size:5.2vw;margin:4vw 5px;color: #ff333e">{{money_num}}</span></div>

          <div
            v-if="openType!=1"
            class="click-btn"
          >
            <div
              v-if="openType!=0"
              class="btn"
              @click="clickHandle(1)"
            >到账</div>
            <div
              v-if="openType==1"
              class="btn"
              @click="clickHandle(3)"
            >转让</div>
            <div
              v-if="openType==0"
              class="btn"
              @click="clickHandle(4)"
            >充值</div>
          </div>
        </div>

        <div
          class="btn-list"
          v-if="openType==1"
        >
          <div
            v-if="openType!=0"
            class="btn"
            @click="clickHandle(1)"
          >到账</div>
          <div
            v-if="false"
            class="btn"
            @click="clickHandle(2)"
          >转兑</div>
          <div
            v-if="openType==1"
            class="btn"
            @click="clickHandle(5)"
          >购物</div>
          <div
            v-if="openType==1"
            class="btn"
            @click="clickHandle(3)"
          >转让</div>
          <div
            v-if="openType==0"
            class="btn"
            @click="clickHandle(4)"
          >充值</div>
        </div>
      </div>
    </div>
    <div style="margin:5vw 0 0vw 5vw">{{openType|yueNameFilter}}记录<span
        style="float:right;margin-right:3vw"
        @click="changeDate"
      >{{currentDate | yymmDateFormat}}<van-icon name="arrow-down" /></span></div>
    <van-pull-refresh
      v-model='isLoading'
      @refresh='onRefresh'
    >
      <div
        v-if="list.length==0"
        class="empty"
      >
        <img src='../../assets/t4.png'>
        <p>{{listEmpty}}</p>
      </div>
      <template>
        <ul class="teamlist">
          <van-list :finished="finished">
            <li
              v-for="(item,index) in list"
              :key="index"
            >
              <div class="teamlist_title">{{item.addtime}}</div>
              <div class="teamlist_bottom">
                <div class="demo">{{item.type_name}}
                  <span v-if="item.goods_title">-</span>
                  {{item.goods_title}}
                </div>
                <div class="money">{{item.flag}} {{Number(item.money)}}</div>
              </div>
              <div
                class="toMobile"
                v-if="item.mobile"
              >{{item.flag=='-'?'转给':'来自'}}：{{item.mobile}}</div>
            </li>
          </van-list>
        </ul>
      </template>
    </van-pull-refresh>
    <van-overlay
      :show="showTime"
      @click="show = false"
    >
      <van-datetime-picker
        class="time-picker"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel='showTime=false'
        @confirm='confirm'
      />
    </van-overlay>
  </div>
</template>
<script>
import {
  getAccountItems,
  getmoney,
  getuserInfo,
  getADCFRecorde,
  newMoneyTip,
} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
import moment from "moment";
export default {
  name: "bonusList",
  components: {
    navCom,
  },
  data() {
    return {
      showTime: false,
      minDate: new Date((2000, 1, 1)),
      maxDate: new Date(),
      currentDate: new Date(),
      showView: true,
      uid: weixin.getUserId(),
      title: "",
      listEmpty: "",
      list: [],
      isLoading: false,
      loading: true,
      finished: false,
      total: 0,
      pageNo: 1,
      Dataflag: "",
      shareUser: {},
      titleList: ["充值钱包记录", "老余额记录", "广告创收记录", "零批余额记录"],
      openType: "",
      sendDate: "",
    };
  },
  filters: {
    yymmDateFormat(val) {
      // this.sendDate = moment(val).format("yyyy-MM");
      return moment(val).format("yyyy年MM月");
    },
    yueNameFilter(val) {
      let name = ["充值钱包", "老余额", "广告创收", "零批收益"];
      return name[val];
    },
  },
  mounted() {
    this.getNewMoneyTip();
    this.openType = this.$route.params["openType"];
    if (this.openType == "pinmoney") {
      this.backOrder = "pinmoney";
    }
    if (this.openType == "pinmoney") {
      this.openType = 0;
    }
    this.title = this.titleList[this.openType];
    if (this.openType == 2) {
      this.getGGCC();
    } else {
      this.init();
    }
    this.getUserData();
  },
  computed: {
    money_num() {
      if (this.openType == 0) {
        return this.shareUser.price;
      } else if (this.openType == 1) {
        return this.shareUser.old_price;
      } else if (this.openType == 2) {
        return this.shareUser.advert_price;
      } else {
        return this.shareUser.lp_price;
      }
    },
  },
  methods: {
    confirm(value) {
      this.showTime = false;
      this.currentDate = value;
      console.log(8888, this.currentDate);
      this.pageNo = 1
      this.list = []
      if (this.openType == 2) {
        this.getGGCC();
      } else {
        this.init();
      }
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    // 改变查询月份
    changeDate() {
      
      this.showTime = true;
    },
    getNewMoneyTip() {
      newMoneyTip()
        .then((result) => {
          console.log(68, result);
          if (result.data.code == 1) {
            this.$dialog.alert({
              title: "提示",
              message: result.data.data.content,
            });
          }
        })
        .catch((err) => {});
    },
    clickHandle(val) {
      if (val == 1) {
        if (this.shareUser.price == 0 && this.openType == 0) {
          Toast("资产不足");
          return;
        } else if (this.shareUser.old_price == 0 && this.openType == 1) {
          Toast("资产不足");
          return;
        } else if (this.shareUser.advert_price == 0 && this.openType == 2) {
          Toast("资产不足");
          return;
        } else if (this.shareUser.lp_price == 0 && this.openType == 3) {
          Toast("资产不足");
          return;
        }
        this.$router.push({
          name: "withdrawal",
          params: { openType: this.openType },
        });
      } else if (val == 2) {
        //余额转兑
        this.$router.push("/exchangeMoney");
      } else if (val == 3) {
        //余额转兑
        this.$router.push({
          name: "balanceToOthers",
          params: { openType: this.openType },
        });
      } else if (val == 4) {
        this.$router.push("/recharge");
      } else if (val == 5) {
        this.$router.push("/everyMonth");
      }
    },
    // 用户信息
    getUserData() {
      getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        if (res.data.code == 1) {
          this.shareUser = res.data.data;
        }
      });
    },
    //返回
    backHandler() {
      if (this.backOrder) {
        if (weixin.isAndroid()) {
          window.JS_TROOPS.goBack();
        } else {
          this.$router.go(-1);
        }
      } else {
        this.$router.go(-1);
      }
    },
    //下拉刷新
    onRefresh() {
      var that = this;
      if (this.finished) {
        this.$dialog
          .alert({
            message: "加载完毕。",
          })
          .then(() => {
            this.isLoading = false;
          });
      } else {
        this.pageNo = 1;
        this.list = [];
        this.isLoading = false;
        this.init();
      }
    },
    //数据加载
    onload() {
      this.init();
    },
    // 广告创收记录
    getGGCC() {
      getADCFRecorde({
        offset: this.pageNo,
        date: moment(this.currentDate).format("yyyy-MM"),
      })
        .then((result) => {
          if (result.data.code == 1) {
            this.list = result.data.data;
            this.finished = true;
            this.loading = false;
            if (res.data.data.length == 10) {
              this.pageNo++;
              this.getGGCC();
              this.list = this.list.concat(res.data.data);
            }
          }
        })
        .catch((err) => {});
    },
    //初始化
    init() {
      getmoney({
        offset: this.pageNo,
        is_old: this.openType == 3 ? 2 : this.openType,
        limit: 10,
        date: moment(this.currentDate).format("yyyy-MM"),
      }).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          this.pageNo++;

          let rows = res.data.data;
          if (rows.length == 0) {
            if (this.Dataflag == "fttProfit") {
              this.listEmpty = "您还没有分红奖励记录哦~";
            } else if (this.Dataflag == "referralProfit") {
              this.listEmpty = "您还没有分享奖励记录哦~";
            } else if (this.Dataflag == "teamProfit") {
              this.listEmpty = "您还没有团队奖励记录哦~";
            } else if (this.Dataflag == "pinmoney") {
              this.listEmpty = "您还没有总资产记录哦~";
            }
          }

          if (rows.length == 10) {
            // this.pageNo++;
            this.init();
          }
          this.list = this.list.concat(rows);
          console.log(88888, this.list);
          // this.total = res.data.data.total
          if (rows.length < 1) {
            this.finished = true;
            this.loading = true;
            this.end = true;
            // this.$dialog.alert({
            //     message:"没有更多了..."
            // })
          } else {
            this.finished = false;
            this.loading = false;
          }
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
      // if(this.Dataflag == 'fttProfit' || this.Dataflag == 'referralProfit' || this.Dataflag == 'teamProfit' || this.Dataflag == 'pinmoney' ){
      //     this.getAccountItemsHandler()
      // }
    },
    //获取分红分享团队总资产数据
    getAccountItemsHandler() {
      getAccountItems({
        userId: this.uid,
        acctc: this.Dataflag,
        pageNo: this.pageNo,
      }).then((res) => {
        if (res.data.code == 200) {
          let rows = res.data.data.rows;
          if (rows.length == 0) {
            if (this.Dataflag == "fttProfit") {
              this.listEmpty = "您还没有分红奖励记录哦~";
            } else if (this.Dataflag == "referralProfit") {
              this.listEmpty = "您还没有分享奖励记录哦~";
            } else if (this.Dataflag == "teamProfit") {
              this.listEmpty = "您还没有团队奖励记录哦~";
            } else if (this.Dataflag == "pinmoney") {
              this.listEmpty = "您还没有总资产记录哦~";
            }
          }
          this.pageNo++;
          this.list = this.list.concat(rows);
          this.total = res.data.data.total;
          if (this.list.length < 1) {
            this.finished = true;
          } else if (this.list.length >= this.total) {
            this.finished = true;
          } else {
            this.finished = false;
            this.loading = false;
          }
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.click-btn {
  /* display: inline-block; */
  float: right;
  margin-right: 3vw;
  margin-top: -1vw;
}
.click-btn .btn {
  height: 8vw;
  width: 20vw;
  line-height: 8vw;
  color: #fff;
  text-align: center;
  background: #ff333e;
  border-radius: 1vw;
}
.time-picker {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.top-view1 {
  color: #000;
  /* background: url("../../assets/my/allmoney.png"); */
  background-image: linear-gradient(to right, #ff3883, #ff333e);
  /* background-size: 100% 100%; */
  width: 100vw;
  border: none;
  /* min-height: 6vh; */
  padding: 1vh 0;
}
.top-view1 .top-view1-box {
  width: 90vw;
  min-height: 8vh;
  margin: 5vw;
  background: #fff;
  border-radius: 3vw;
  padding: 1vh 0;
}
.top-view1 .top-view1-box .texts-top {
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.top-view1 .top-view1-box .btn-list {
  display: flex;
  margin-top: 5vw;
  justify-content: space-around;
}
.top-view1 .top-view1-box .btn-list .btn {
  height: 8vw;
  width: 20vw;
  line-height: 8vw;
  color: #fff;
  text-align: center;
  background: #ff333e;
  border-radius: 1vw;
}
p {
  padding: 0;
  margin: 0;
}
.bg {
  background: #f1f3f6;
  min-height: 100vh;
  position: relative;
}
.teamlist {
  margin: 0 4vw;
  overflow: hidden;
  margin-bottom: 20vw;
}
.toMobile {
  padding-left: 4vw;
  font-size: 14px;
  margin-bottom: 5px;
}
.teamlist li {
  background: #fff;
  margin-top: 4vw;
  overflow: hidden;
}
.teamlist_title {
  padding-left: 4vw;
  border-radius: 1.3vw;
  border-bottom: 1px solid #e8e8e8;
  color: #999;
  line-height: 8vw;
}
.teamlist_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 8vw;
}
.teamlist_bottom .demo {
  font-size: 14px;
  padding-left: 4vw;
  width: 60vw;
  color: #333;
  line-height: 8vw;
}
.teamlist_bottom .money {
  padding-right: 2vw;
  color: #ff0000;
}
.empty {
  padding-top: 29.33vw;
  text-align: center;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
</style>